<template>
  <view class="video-container">
    <!-- 视频播放器 -->
    <video
      :src="videoUrl"
      :controls="true"
      @timeupdate="onTimeUpdate"
      id="myVideo"
      class="video-player"
      v-if="videoUrl"
    ></video>
    
    <!-- 试看结束遮罩层 -->
    <view v-if="showPayOverlay" class="pay-overlay">
      <view class="pay-modal">
        <text class="pay-title">试看结束，购买后可观看完整视频</text>
        <text class="pay-price">价格: ￥{{ price }}</text>
        <button type="primary" @tap="handlePay" class="pay-button">立即购买</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    videoId: String, // 视频ID
    price: {
      type: Number,
      default: 0.01 // 默认价格，用于测试
    },
    previewDuration: {
      type: Number,
      default: 180 // 默认试看时长3分钟（180秒）
    }
  },
  data() {
    return {
      videoUrl: 'https://1500035868.vod-qcloud.com/6cd09b06vodcq1500035868/c296f46e5145403697445098267/MoCA7a2eaGYA.mp4', // 视频播放地址
      currentTime: 0, // 当前播放时间
      hasPurchased: false, // 是否已购买
      showPayOverlay: false, // 是否显示支付遮罩
      videoContext: null // 视频上下文
    };
  },
  mounted() {
    // 获取视频上下文
    this.videoContext = uni.createVideoContext('myVideo', this);
    // 初始化视频
    //this.initVideo();
  },
  methods: {
    // 初始化视频
    async initVideo() {
      try {
        // 检查购买状态
        const hasPurchased = await this.checkPurchaseStatus();
        if (hasPurchased) {
          // 已购买，获取完整视频
          this.hasPurchased = true;
          this.videoUrl = await this.getFullVideoUrl();
        } else {
          // 未购买，获取试看视频
          this.videoUrl = await this.getPreviewVideoUrl();
        }
      } catch (error) {
        console.error('初始化视频失败:', error);
        uni.showToast({
          title: '加载视频失败',
          icon: 'none'
        });
      }
    },
    
    // 监听播放时间更新
    onTimeUpdate(e) {
      this.currentTime = e.detail.currentTime;
      
      // 如果未购买且播放时间超过试看时长，暂停播放并显示支付弹窗
      if (!this.hasPurchased && this.currentTime >= this.previewDuration) {
        this.videoContext.pause();
        this.showPayOverlay = true;
      }
    },
    
    // 处理支付
    async handlePay() {
      try {
        // 调用微信支付
        const paymentResult = await this.requestPayment();
        
        if (paymentResult) {
          // 支付成功，更新购买状态
          await this.updatePurchaseStatus();
          this.hasPurchased = true;
          this.showPayOverlay = false;
          
          // 获取完整视频地址并播放
          this.videoUrl = await this.getFullVideoUrl();
          
          // 从试看结束处开始播放
          setTimeout(() => {
            this.videoContext.seek(this.previewDuration);
            this.videoContext.play();
          }, 500);
        }
      } catch (error) {
        console.error('支付失败:', error);
        uni.showToast({
          title: '支付失败',
          icon: 'none'
        });
      }
    },
    
    // 检查购买状态（实际开发中应调用后端API）
    async checkPurchaseStatus() {
      // 这里应调用后端API检查用户是否已购买该视频
      // 以下是模拟实现
      const purchasedVideos = uni.getStorageSync('purchased_videos') || [];
      return purchasedVideos.includes(this.videoId);
    },
    
    // 获取试看视频地址（实际开发中应调用后端API）
    async getPreviewVideoUrl() {
      // 实际开发中，后端应对视频进行处理，返回前3分钟的视频地址
      // 或者使用云服务商的点播服务（如腾讯云点播、保利威等）:cite[1]:cite[2]
      const res = await uni.request({
        url: 'https://your-api.com/video/preview',
        method: 'POST',
        data: {
          videoId: this.videoId
        }
      });
      
      return res.data.url;
    },
    
    // 获取完整视频地址（实际开发中应调用后端API）
    async getFullVideoUrl() {
      // 实际开发中，后端应返回完整的视频地址
      // 对于已付费用户，可返回带有临时令牌的地址:cite[1]
      const res = await uni.request({
        url: 'https://your-api.com/video/full',
        method: 'POST',
        data: {
          videoId: this.videoId
        }
      });
      
      return res.data.url;
    },
    
    // 请求支付（实际开发中应调用后端API）
    async requestPayment() {
      // 先请求后端生成支付订单
      const orderRes = await uni.request({
        url: 'https://your-api.com/payment/create-order',
        method: 'POST',
        data: {
          videoId: this.videoId,
          price: this.price
        }
      });
      
      // 调用微信支付
      return new Promise((resolve, reject) => {
        uni.requestPayment({
          provider: 'wxpay',
          orderInfo: orderRes.data.orderInfo,
          success: (res) => {
            resolve(true);
          },
          fail: (err) => {
            reject(err);
          }
        });
      });
    },
    
    // 更新购买状态（实际开发中应调用后端API）
    async updatePurchaseStatus() {
      // 将视频添加到已购买列表
      const purchasedVideos = uni.getStorageSync('purchased_videos') || [];
      if (!purchasedVideos.includes(this.videoId)) {
        purchasedVideos.push(this.videoId);
        uni.setStorageSync('purchased_videos', purchasedVideos);
      }
      
      // 实际开发中应调用后端API记录购买状态
      await uni.request({
        url: 'https://your-api.com/payment/confirm',
        method: 'POST',
        data: {
          videoId: this.videoId
        }
      });
    }
  }
};
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  height: 400rpx;
}
.video-player {
  width: 100%;
  height: 100%;
}
.pay-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pay-modal {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 16rpx;
  text-align: center;
  width: 80%;
}
.pay-title {
  display: block;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}
.pay-price {
  display: block;
  font-size: 36rpx;
  color: #e64340;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.pay-button {
  background-color: #07c160;
  color: white;
}
</style>